<template>
    <v-layout type="main">
        <div class="detail-layout">
            <el-form class="form myself-form alick-add-form" ref="form" :model="addForm" :rules="submitRules" label-width="120px">
                <div>
                    <el-form-item label="引用任务">
                        <el-select  value-key="id" v-model="gameExperiment" @change="changeGameExperiment(gameExperiment)" prop="scenario_id"
                            class="full-extent-select">
                            <el-option v-for="item in gameExperimentOptions" :value="item" :label="item.name" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="超参" prop="param">
                        <div class="outin-box" v-for="(e, i) in parameter_list" :key="i">
                        <div class="port-lis">
                            <span class="outin-input-name-title">名称</span>
                            <el-input type="text" v-model="e.name" size="mini" class="port-el-input" />
                            <span class="outin-input-name-title"> 值 </span>
                            <el-input type="text" v-model="e.value" size="mini" class="port-el-input" />
                        </div>
                        <span class="outin-handle">
                            <a href="javascript:;" @click="addParam(i)" v-if="i == parameter_list.length - 1">增加</a>
                            <span v-else class="slot-btn"></span>
                            <a href="javascript:;" @click="delParam(i)" v-if="parameter_list.length > 1">删除</a>
                        </span>
                        </div>
                    </el-form-item>                                        
                    <el-form-item label="引擎数">
                        <el-input-number  v-model="engine"></el-input-number>
                    </el-form-item>              
                    <el-form-item label="回合数">
                        <el-input-number v-model="round"></el-input-number>
                    </el-form-item>
                </div>
                <el-form-item label=" ">
                    <el-button class="none-type" @click="updateSubmmit">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import { getGameSimulationDetail, addGameSimulationFromSource, putGameSimulation } from '@/api/gameSimulation'
import { getAllGameExperiments, getGameExperimentDetail } from '@/api/gameExperiment'
import { getAllScenarios } from '@/api/scenario'
export default {
    data() {
        return {
            addForm: { type: this.$route.query.type },  // 1-评估推演, 2-分支推演，3-多节点仿真任务
            submitRules: {
                scenatio_id: [
                    { required: true, message: "该项为必填项" },
                ]
            },
            round: null,
            engine: null,
            scenarioOptions: [],
            scenario: null,
            gameExperimentOptions: [],
            gameExperiment: null,
            bizId: this.$route.query.id,
            parameter_list: [{}]
        };
    },
    components: {
    },
    async created() {        
        this.getGameExperimentList()         
        this.getScenarioList() 
        this.getData()
    },
    async mounted() {
        this.$forceUpdate();
    },
    methods: {
        async setAddForm() {
            this.addForm.source_id = this.gameExperiment.id
            this.addForm.parameter_list = this.parameter_list.filter(e => e.name)
            this.addForm.round = this.round
            this.addForm.engine = this.engine
            console.log('addForm', this.addForm)
        },
        async getAddForm(data) {
            this.addForm = data
            this.scenario = this.addForm.scenario
            this.round = this.addForm.round
            this.engine = this.addForm.engine
            this.parameter_list = this.addForm.parameter_list
            if (this.parameter_list == null || this.parameter_list.length == 0) {
                this.parameter_list = [{}]
            }
            let res = await getGameExperimentDetail({id: data.source_id})
            this.gameExperiment = res.data
        },
        async getData() {
            if (this.$route.query.id) {
                let res = await getGameSimulationDetail({ id: this.$route.query.id })
                this.getAddForm(res.data)
            }
        },
        toList() {    
            let path = '/assess'
            if (this.$route.query.type == 2) {
                path = '/deduce'
            }        
            this.$router.push({path})
        },
        addParam() {
            this.parameter_list.push({})
        },
        delParam(i) {
            this.parameter_list.splice(i, 1)
        },        
        async getScenarioList() {
            let res = await getAllScenarios()
            this.scenarioOptions = res.data
        },
        async getGameExperimentList() {
            let res = await getAllGameExperiments()
            this.gameExperimentOptions = res.data
        },
        async updateSubmmit() {
            this.setAddForm()
            console.log(this.addForm)
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.$route.query.id) {
                        let ret = await putGameSimulation({ ...this.addForm })
                        if (ret && ret.data) {
                            this.toList()
                        }
                    }
                    else {
                        let res = await addGameSimulationFromSource(this.addForm);
                        this.getAddForm(res.data)
                        this.bizId = res.data.id
                        if (res && res.data) {
                            this.toList()
                        }
                    }
                }
            })
        }
    },


}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>